<!--
 - Author : wang885298.
 - Date   : 2018/6/25.
 - File   : pat-list.随手拍列表组件
 -->

<template>
  <div class="list">
    <div class="list-ownner">
      <div class="list-ownner-left">
        <p class="name">{{civilizeList.userName}}</p>
        <p class="time">{{civilizeList.createTime}}</p>
      </div>
      <div class="list-ownner-right" :showShareTag="true">
        <img class="share" src="../assets/images/share.png" alt="" :showShareTag="true">
      </div>
    </div>
    <div class="list-detail">
      <p class="txt">{{civilizeList.content}}</p>
      <div class="imgList">
        <div class="img"
            v-for="(file,index) in civilizeList.attachments"
            :key="index"
            :style="{width:(judgeFileType(file.fileUrl) !=='mp4')?((civilizeList.attachments.length>1)?'30%':'auto'):'100%',height: ((judgeFileType(file.fileUrl) ==='mp4')?'20rem':'12rem')}"
            @click="play(file,index,civilizeList.attachments, 'b'+file.fileId)">
          <img v-preview="file.fileUrl"
              :src="file.fileUrl"
              :alt="file.fileName"
              preview-title-enable="false"
              preview-nav-enable="true"
              v-if="judgeFileType(file.fileUrl) === 'pic'"
          :style="{width:(civilizeList.attachments.length===1)?'auto':'100%',height:(civilizeList.attachments.length===1)?'100%':'auto'}">
          <div class="btn" v-if="judgeFileType(file.fileUrl) === 'mp4'" :id="'b'+file.fileId">
            <img :src="videoIcon" alt="">
          </div>
          <video :src="file.fileUrl" v-if="judgeFileType(file.fileUrl) === 'mp4'"
              :id="file.fileId"></video>
        </div>
      </div>
      <div class="comment">
        <input class="input" type="text" value="游客" :id="'u'+civilizeList.snapShotId">
        <div class="textarea" contenteditable="true" :id="'c'+civilizeList.snapShotId" placeholder="严禁发布反动，色情，迷信，暴力言论">
        </div>
        <div class="replay-btn" @click="addSnapShotReply('u'+civilizeList.snapShotId,'c'+civilizeList.snapShotId,civilizeList)">评论</div>
      </div>
    </div>
    <div class="replay-list" :id="civilizeList.snapShotId">
      <div class="list-replay" v-for="(replay,index) in civilizeList.replys" :key="index" v-show="index < showTag">
        <p>
          <span>{{replay.userName}}</span>
          <span>{{replay.createTime}}</span>
        </p>
        <p class="relay-txt">{{replay.content}}</p>
      </div>
    </div>
    <div class="relay-more" v-show="civilizeList.replys.length>3" @click="seeMore(civilizeList.replys.length)">{{moreTxt}}
</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        moreTxt: '显示更多评论',
        videoIcon: require('../assets/images/play.png'),
        showTag: 3
      }
    },
    props: {
      civilizeList: {}
    },
    methods: {
      /**
       * 添加评论
       */
      addSnapShotReply (uid, cid, item) {
        this.$emit('addSnapShotReply', uid, cid, item)
      },
      /**
       * 播放视频
       */
      play (item, index, files, bid) {
        this.$emit('play', item, index, files, bid)
      },
      /**
       * 判断文件类型
       * @param val：传的文件
       */
      judgeFileType (val) {
        let file = val.substring(val.lastIndexOf('.') + 1).toLowerCase()
        let fileType = ''
        switch (file) {
          case 'avi':
          case 'dat':
          case 'mkv':
          case 'flv':
          case 'vob':
          case 'wmv':
          case 'asf':
          case 'asx':
          case 'rm':
          case 'rmvb':
          case 'mp4':
          case '3gp':
          case 'mov':
          case 'm4v':
          case 'webm':
            fileType = 'mp4'
            break
          case 'ppt':
          case 'pptx':
          case 'doc':
          case 'docx':
          case 'pdf':
            fileType = 'office'
            break
          case 'jpg':
          case 'jpeg':
          case 'png':
          case 'bmp':
          case 'gif':
            fileType = 'pic'
            break
        }
        return fileType
      },
      /**
       * 显示更多评论
       * @param length
       */
      seeMore (length) {
        if (this.showTag === 3) {
          this.showTag = length
          this.moreTxt = '收起评论'
        } else {
          this.showTag = 3
          this.moreTxt = '显示更多评论'
        }
      },
      /**
       * 获取视频第一帧的图片
       * @param id
       */
      getImage (id) {
        let video
        let scale = 0.8;
        let initialize = function() {
          video = document.getElementById(id)
          video.addEventListener('loadeddata', captureImage)
        }
        let captureImage = function () {
          let canvas = document.createElement('canvas')
          canvas.width = video.videoWidth * scale
          canvas.height = video.videoHeight * scale
          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)

          let img = document.createElement('img')
          img.src = canvas.toDataURL('image/png')
          return img
        }

        initialize()
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
</style>
